<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome to DKONE</title>
<style>
  .btn {
    /* display: inline-block; */
    width: 100px;
    margin: 20px auto;
    padding: 10px 20px; /* 自定义内边距 */
    border: none; /* 移除边框 */
    border-radius: 4px; /* 圆角边框 */
    background-color: #f1f1f1; /* 背景颜色 */
    color: #000000; /* 文字颜色 */
    text-align: center; /* 文字居中 */
    text-decoration: none; /* 去除文字装饰效果 */
    transition: background-color 0.3s ease; /* 过渡动画效果 */
    cursor: pointer; /* 鼠标指针样式为手型 */
  }

  .btn:hover {
    background-color: #eaeaea; /* 鼠标悬停时的背景颜色 */
  }

  .btn:active {
    background-color: #dcdcdc; /* 按下时的背景颜色 */
  }
  
  #list {
    display: block;
    text-align: center;
    margin:20px auto;
    width: 50%;
  }
  
  img {
    width: 100px;
    margin: 100px auto;
  }

</style>
<script>
  var ajax = new XMLHttpRequest();
  window.onload = function(){
    //获取域名和协议
    let origin = window.location.origin;
    
    let playerName = localStorage.getItem('playerName');

    let loadImg = document.querySelector('#loadImg');
    let list = document.querySelector('#list');
    let noRoom = document.querySelector('#noRoom');
    
    loadImg.src = origin+'/web/gif/loading.gif';
    loadImg.style.display = 'none';
    noRoom.style.display = 'none';


    ajax.onreadystatechange = function(){
      if(ajax.readyState == 4 && ajax.status == 200){
        let rooms = JSON.parse(this.responseText);
        if(rooms.length > 0){
          for(var i in rooms){
            let li = document.createElement("li");
            console.log(rooms[i].roomId);
            li.id = rooms[i].roomId;
            li.className = "btn";
            li.innerHTML="room"+i;
            li.addEventListener('click',function(){
              joinRoom(rooms[i].roomId);
              localStorage.setItem('roomId',rooms[i].roomId);
            });
            list.appendChild(li);
          }
        }else{
          noRoom.style.display = 'block';
        }
      }
    }
    ajax.open('GET',origin+'/showRooms?playerName='+playerName,false);
    ajax.send();
    
    //创建房间方法
    document.querySelector('#createRoom').addEventListener('click',function(){
      let createRoomAjax = new XMLHttpRequest();
      createRoomAjax.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
          let roomId = JSON.parse(this.responseText).roomId;
          localStorage.setItem('roomId',roomId);
          checkRoom(roomId);
        }
      }
      createRoomAjax.open('GET',origin+'/createRoom?playerName='+playerName,false);
      createRoomAjax.send();
      //隐藏按钮
      document.querySelectorAll('div').forEach(element => {
        element.style.display = 'none';
      });
      //显示加载动画
      loadImg.style.display = 'block';
    });
    
    //加入房间
    function joinRoom(roomId){
      let joinRoomAjax = new XMLHttpRequest();
      joinRoomAjax.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
          //跳转GAME
					window.location.href = origin+'/game?playerName='+playerName;
        }
      }
      joinRoomAjax.open('GET',origin+'/joinRoom?playerName='+playerName+'&roomId='+roomId);
      joinRoomAjax.send();
    }
    
    //检查房间
    function checkRoom(roomId){
      let checkRoomAjax = new XMLHttpRequest();
      checkRoomAjax.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
          let room = JSON.parse(this.responseText);
          if(room && room.former){
            localStorage.setItem('former',room.former);
            window.location.href = origin+'/game?playerName='+playerName;
          }
        }
      }
      checkRoomAjax.open('GET',origin+'/checkRoom?roomId='+roomId);
      checkRoomAjax.send();
    }
  
  }
</script>
</head>
<body>
  <div>
    <div id='list'>
      <text id='noRoom'>没有房间<text>
    </div>
    <div id='createRoom' class="btn">+</div>
  </div>
  <img id="loadImg"/>
<script>
</script>
</body>
</html>
